<!--
 * @Descripttion: 异步选择器
 * @version: 1.0
 * @Author: sakuya
 * @Date: 2021年8月3日15:53:37
 * @LastEditors: Xujianchen
 * @LastEditTime: 2023-03-17 10:20:39
-->

<template>
	<div class="sc-select">
		<div v-if="initloading" class="sc-select-loading">
			<el-icon class="is-loading"><el-icon-loading /></el-icon>
		</div>
		<el-select v-bind="$attrs" :loading="loading" @visible-change="visibleChange">
			<el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]" :value="item[props.value]">
				<slot name="option" :data="item"></slot>
			</el-option>
		</el-select>
	</div>
</template>

<script>
import config from '@/config/select'

export default {
	props: {
		apiObj: { type: Object, default: () => {} },
		dic: { type: String, default: '' },
		params: { type: Object, default: () => ({}) }
	},
	data() {
		return {
			dicParams: this.params,
			loading: false,
			options: [],
			props: config.props,
			initloading: false
		}
	},
	created() {
		//如果有默认值就去请求接口获取options
		if (this.$attrs.modelValue && this.$attrs.modelValue.length > 0) {
			this.initloading = true
			this.getRemoteData()
		}
	},
	methods: {
		//选项显示隐藏事件
		visibleChange(ispoen) {
			if (ispoen && this.options.length === 0 && (this.dic || this.apiObj)) {
				this.getRemoteData()
			}
		},
		//获取数据
		async getRemoteData() {
			this.loading = true
			this.dicParams[config.request.name] = this.dic
			var res = {}
			if (this.apiObj) {
				res = await this.apiObj.get(this.params)
			} else if (this.dic) {
				res = await config.dicApiObj.get(this.params)
			}
			var response = config.parseData(res)
			this.options = response.data
			this.loading = false
			this.initloading = false
		}
	}
}
</script>

<style scoped>
.sc-select {
	display: inline-block;
	position: relative;
}
.sc-select-loading {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #fff;
	z-index: 100;
	border-radius: 5px;
	border: 1px solid #ebeef5;
	display: flex;
	align-items: center;
	padding-left: 10px;
}
.sc-select-loading i {
	font-size: 14px;
}

.dark .sc-select-loading {
	background: var(--el-bg-color-overlay);
	border-color: var(--el-border-color-light);
}
</style>
